<template>
  <div class="dashboard">
    <h3>el-card组件</h3>
    <el-card>
      <template #header>
        卡片名称
      </template>
      <div>卡片内容</div>
    </el-card>
    <h3>树形控件---el-tree组件</h3>
    <pre>
      data:用于展示树形数据
        默认要求：文本内容字段名：label，子集：children
      props:{
        label:'label',  // 需要展示的数据对应的字段名
        children:'children' //需要展示 的子集对应的字段名
      }
      default-expand-all:是否展开所有节点
    </pre>
    <el-tree
      :data="treeData"
      default-expand-all
      :props="{ label: 'name', children: 'child' }"
    >
      <template v-slot="{ data }">
        <!-- scope:{node,data} 
        node：element组件提供的组件内的一些属性值，
        data:当前点击项的数据
        插槽:自定义当前项的内容
        -->
        <!-- <div>
          <el-button @click="slotClick(node, data)">按钮</el-button>
        </div> -->
        <div>
          <span>{{ data.name }}</span>
          -----<span>孙财</span>-------------
          <el-dropdown>
            <span>操作</span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>新增</el-dropdown-item>
                <el-dropdown-item>删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </template>
    </el-tree>

    <hr />
    <h3>弹框组件</h3>
    <el-button @click="isShow = true">显示弹框组件</el-button>
    <el-dialog title="我是一个弹框组件" width="500px" :visible.sync="isShow">
      <div>我是弹框的内容区域</div>
      <template #footer>
        <el-button type="primary">确定</el-button>
        <el-button @click="isShow = false">取消</el-button>
      </template>
    </el-dialog>

    <!--  -->
    <hr />
    <h3>select:{{ selectValue }}</h3>
    <el-select v-model="selectValue">
      <el-option label="web前端" value="web"></el-option>
      <el-option label="java后端" value="java"></el-option>
    </el-select>
    <hr />
    <h3>tabel组件</h3>
    <el-table :data="tableData" border>
      <el-table-column label="序号" width="50px">
        <template v-slot="{ $index }">
          <div>
            {{ $index + 1 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="日期" prop="date" sortable></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="地址" prop="address">
        <template v-slot="{ row }">
          <div>地址:{{ row.address }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ $index, row }">
          <div>
            <span>{{ $index }}-----------{{ row }}</span>
            <el-button>查看</el-button>
            <el-button>转正</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <hr />
    <h3>分页器组件</h3>
    <pre>
        组件名：el-pagination
           current-page:默认选中的页码
           page-sizes：页容量选项
           page-size：默认页容量
           layout：功能块，
           total：总数
           @size-change：页容量改变量触发、
           @current-change：页码改变时触发
    </pre>
    <el-pagination
      :current-page="page.currPage"
      :page-sizes="[5, 100, 200, 300, 400]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    <hr />
    <h3>日期组件</h3>
    <el-date-picker type="date" placeholder="选择日期"> </el-date-picker>
    <hr />
    <h3>导出功能</h3>
    <el-button type="primary" @click="exportFN">导出</el-button>
    <!-- 导出功能 -->
    <hr />
    <h3>二维码生成-qrcode</h3>
    <canvas ref="canvas"></canvas>
    <el-button @click="btnClick">点击生成二维码</el-button>
    <hr />
    <h3>tree控件：可以多选，可以设置默认勾选，可以拿到选择后的值</h3>
    <!-- 
      data:绑定数据
      props:{
        label:'label'
        children:'children'
      }
      show-checkbox:是否有多选框显示
      check-strictly：是否父子不关联，默认是false(父子关联)
      设置默认勾选项(如果修改了默认勾选项的值，它是在以前基础上的累加)
         1：在el-tree绑定  node-key="该项选中后对应的值的字段名"
         2：default-checked-keys=[希望默认勾选上的对应的值]
     拿到已勾选项
       1：el-tree绑定  ref="tree"
       2:通过调用el-tree组件身上的一个this.$refs.tree.getCheckedKeys()
       this.$refs.tree.getCheckedKeys()
     设置勾选项（以设置的值为准，没有累加效果）
       1:el-tree绑定  ref="tree"
       2:通过调用el-tree组件身上的一个
       this.$refs.tree.setCheckedKeys([需要勾选项的值])

    
     -->
    <el-tree
      ref="tree"
      check-strictly
      show-checkbox
      :data="treeData"
      node-key="id"
      :default-checked-keys="defaultKeys"
      :props="{ label: 'name', children: 'child' }"
    >
    </el-tree>
    <el-button @click="getChecked">获取已勾选项</el-button>
    <el-button @click="setChecked">设置勾选项</el-button>
    <el-button @click="setDefaultChecked">修改默认勾选项的值</el-button>
    <hr />
    <h3>全屏插件使用:screenfull</h3>
    <el-button @click="fullClick">全屏切换</el-button>
    <hr />
    <h3>i18n的应用</h3>
    <h4>{{ $t('xxx') }}</h4>
    <el-button @click="$i18n.locale = 'zh'">切换语言到中文</el-button>
    <el-button @click="$i18n.locale = 'en'">切换语言到英文</el-button>
  </div>
</template>
<script>
import { export_json_to_excel } from '@/vendor/Export2Excel'
import Qrcode from 'qrcode'
import screenfull from 'screenfull'
export default {
  data () {
    return {
      defaultKeys: ['1-1-1-1', '1-2'],
      // treeData: [
      //   {
      //     name: '深圳',
      //     children: [
      //       {
      //         name: '宝安区'
      //       },
      //       {
      //         name: '南山区'
      //       }
      //     ]
      //   },
      //   {
      //     name: '广州',
      //     children: [
      //       {
      //         name: '白云区'
      //       },
      //       {
      //         name: '天河区'
      //       }
      //     ]
      //   }
      // ],
      page: {
        currPage: 2,
        pageSize: 5,
        total: 100
      },
      selectValue: 'web',
      isShow: false,
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      treeData: [
        {
          id: '1',
          name: '广东省',
          child: [
            {
              id: '1-1',
              name: '深圳市',
              child: [
                {
                  id: '1-1-1',
                  name: '宝安区',
                  child: [
                    {
                      id: '1-1-1-1',
                      name: '石岩'
                    }
                  ]
                }
              ]
            },
            {
              id: '1-2',
              name: '广州市'
            }
          ]
        }
      ]
    }
  },
  methods: {
    fullClick () {
      console.log('screenfull', screenfull)
      if (screenfull.isEnabled) {
        screenfull.toggle()
      } else {
        this.$message.error('该浏览器不支持全屏')
      }
    },

    // 获取已勾选项
    getChecked () {
      console.log(this.$refs.tree.getCheckedKeys())
    },
    // 设置勾选项
    setChecked () {
      this.$refs.tree.setCheckedKeys(['1-1'])
    },
    // 设置默认勾选项
    setDefaultChecked () {
      this.defaultKeys = ['1-1']
    },
    // 点击生成二维码
    btnClick () {
      Qrcode.toCanvas(this.$refs.canvas, 'https://www.baidu.com', {
        width: 400,
        height: 400
      })
    },
    slotClick (node, data) {
      // console.log(node, data)
    },
    handleSizeChange (size) {
      // console.log('页容量:', size)
    },
    handleCurrentChange (page) {
      // console.log('页码:', page)
    },
    // 导出

    exportFN () {
      let arr = [
        { name: '董浩飞', id: 1, address: '宝安' },
        { name: '彭司机', id: 2, address: '广州' }
      ]
      //  1:写出规则
      const rules = {
        姓名: 'name',
        地址: 'address'
      }
      const newArr = arr.map(item => {
        // item:{ name: '董浩飞', id: 1, address: '宝安' }
        // [name,address]
        // const arr = []
        // Object.values(rules).forEach(key => {
        //   arr.push(item[key])
        // })
        // return arr
        return Object.values(rules).map(key => {
          return item[key]
        })
      })

      export_json_to_excel({
        header: Object.keys(rules),
        data: newArr,
        filename: '测试保存'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard {
  padding: 15px;
}
</style>
